<template lang="pug">
    //总商品列表
    .commodity
        .commodity-list(v-if="!isDetail")
            //商品所属 类型
            .commodity-type(v-for="(item,index) in list" :key="index")
                //商品类型名称
                h5
                    span.title
                        span.red-line
                        span.title-text {{item.name}}
                    span {{item.p}}
                //商品内容
                div.commodity-content
                    //单个商品展示,单机单个商品时,将flag =k1 ,index =k2
                    div(v-for="(cell,flag) in item.cell" @click="showDetail(index,flag)" :key="flag" :key2="index").commodity-content-item
                        img(:src="cell.url").commodity-img
                        .pay ${{cell.pay}}
                        p
                            span.commodity-name {{cell.name}}
                            span.buy
            //垫高度
            end-line
        commodity-detail-show(:type="type" :num="num" :isDetail="isDetail" :number="number" @DetailClose="isDetail = false")
            //垫高度
            end-line
</template>

<script>
    import EndLine from "../../../views/EndLine";
    import CommodityDetailShow from "../../../views/commodityDetailShow";

    export default {
        name: "commodity",
        components: {CommodityDetailShow, EndLine},
        data() {
            return {
                list: [
                    {
                        name: "休息零食",
                        P: "P1",
                        cell: [
                            {
                                name: "夏威夷果",
                                pay: 20,
                                url: require('../../../../public/img/home/commodity/fruit1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/fruit1.png')},
                                    {url: require("../../../../public/img/home/commodity/fruit2.png")},
                                    {url: require("../../../../public/img/home/commodity/fruit3.png")},
                                ],
                                introduce: "夏威夷果含有丰富的钙，磷 ，铁，维生素B1、B2和人体必需的8种氨基酸。"
                            },
                            {
                                name: "好吃的糖果",
                                pay: 40,
                                url: require('../../../../public/img/home/commodity/sweets1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/sweets1.png')},
                                    {url: require("../../../../public/img/home/commodity/sweets2.png")},
                                ],
                                introduce: "糖果是糖果糕点的一种，指以糖类为主要成份的一种小吃。"
                            }
                        ]
                    },
                    {
                        name: "精品服饰",
                        P: "P2",
                        cell: [
                            {
                                name: "卡通T恤",
                                pay: 120,
                                url: require('../../../../public/img/home/commodity/Tshirt1.png'),
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/Tshirt1.png')},
                                    {url: require("../../../../public/img/home/commodity/Tshirt2.png")},
                                ],
                                introduce: ""
                            },
                            {
                                name: "直男衬衫",
                                pay: 140,
                                url: require('../../../../public/img/home/commodity/shirt1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/shirt1.png')},
                                    {url: require("../../../../public/img/home/commodity/shirt2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "手机数码",
                        P: "P3",
                        cell: [
                            {
                                name: "笔记本电脑",
                                pay: 5020,
                                url: require('../../../../public/img/home/commodity/computer1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/computer1.png')},
                                    {url: require("../../../../public/img/home/commodity/computer2.png")},
                                ],
                                introduce: "笔记本电脑是一种小型、可方便携带的个人电脑。"
                            },
                            {
                                name: "炫酷耳机",
                                pay: 1140,
                                url: require('../../../../public/img/home/commodity/headset1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/headset1.png')},
                                    {url: require("../../../../public/img/home/commodity/headset2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "户外运动",
                        P: "P4",
                        cell: [
                            {
                                name: "时尚运动鞋",
                                pay: 520,
                                url: require('../../../../public/img/home/commodity/shoe1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/shoe1.png')},
                                    {url: require("../../../../public/img/home/commodity/shoe2.png")},
                                    {url: require("../../../../public/img/home/commodity/shoe3.png")}
                                ],
                                introduce: ""
                            },
                            {
                                name: "斯伯丁篮球",
                                pay: 240,
                                url: require('../../../../public/img/home/commodity/basketball1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../../../public/img/home/commodity/basketball1.png')},
                                    {url: require("../../../../public/img/home/commodity/basketball2.png")}
                                ],
                                introduce: "不易漏气变形，不易开胶起皮，篮球制作工艺复杂严格，球体坚固耐用。"
                            }
                        ]
                    }
                ],
                postList: [0, 0, 0, 0, 0, 0, 0, 0],
                isDetail: false,
                // 类型
                type: 0,
                // 第几个
                num: 0,
                //数量几个
                number: 0
            }
        },
        methods: {
            showDetail(index, flag) {
                this.type = index;
                this.num = flag;
                this.isDetail = true;
                if (flag < 1) {
                    index *= 2;
                } else {
                    index *= 2;
                    index += 1;
                }
                this.number = this.postList[index];
            },
        }
    }
</script>

<style scoped lang="stylus">
    .fade-enter-active
        transition: 1s

    .fade-leave-active
        transition: 1s

    .fade-enter, .fade-leave-to
        transform: translateX(-100%);
        opacity: .8;

    .commodity
        .commodity-list
            .commodity-type
                h5
                    padding 0 0.2rem
                    display: flex
                    justify-content space-between
                    height 1rem
                    line-height 1rem
                    font-size: 0.37rem
                    margin 0.1rem 0
                    .red-line
                        margin-right 0.2rem
                        height 0.3rem
                        width 0.1rem
                        background-color red
                        display: inline-block
                .commodity-content
                    border-top 0.01rem solid #ddd
                    border-bottom 0.01rem solid #ddd
                    &:after
                        content ''
                        display block
                        clear both
                    .commodity-content-item
                        display: inline-block
                        width 45%
                        padding 0.2rem
                        &:nth-child(1)
                            border-right 0.01rem solid #ddd
                        .commodity-img
                            width 100%
                            height: 3rem
                        .pay
                            text-align left
                            color: red
                            font-size 0.4rem
                        p
                            display: flex
                            justify-content space-between
                            .buy
                                background url("../../../assets/icon/home/commodity/buy.png") no-repeat
                                background-size contain
                                width 0.5rem
                                height 0.5rem
                                display: inline-block

</style>
